<script setup lang="ts">
import Header from '../components/Header/index.vue'
import Menu from '../components/Menu/index.vue'

defineOptions({
  name: 'LayoutVertical'
})
</script>

<template>
  <div class="common-layout">
    <el-container class="outer-layer-container">
      <el-aside>
        <Menu mode="vertical" />
      </el-aside>
      <el-container class="inner-layer-container">
        <el-header>
          <Header />
        </el-header>
        <el-main><RouterView /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.common-layout {
  height: 100%;

  .outer-layer-container {
    height: 100%;

    .el-aside {
      height: 100%;
      width: auto;
      border-right: 1px solid var(--el-border-color-light);
      overflow: hidden;
    }

    .inner-layer-container {
      height: 100%;

      .el-header {
        padding: 0;
      }

      .el-main {
        background-color: var(--el-fill-color);
        padding: var(--zc-padding-10);
      }
    }
  }
}
</style>
